<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-page-header__content{
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header style="background-color: #0095d7;
            color: white;line-height: 60px" @back="goBack" content="修改客户信息">
    </el-page-header>
    <el-card style="width: 450px;height: 400px;margin: 50px auto">
        <el-form label-width="80px">
            <el-form-item label="客户名称">
                <el-input style="width: 320px" type="text" v-model="customer.name"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input style="width: 320px" type="text" v-model="customer.address"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
                <el-input style="width: 320px" type="text" v-model="customer.contact"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input style="width: 320px" type="text" v-model="customer.tel"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="update()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-card> <!--显示一个框-->
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                customer:{name:"",address:"",contact:"",tel:""}
            }
        },
        methods:{
            update(){
                //发出修改商品的请求
                axios.post("/customer/update",v.customer).then(function (response) {
                    //跳转到管理页面
                    location.href="/admin.html";
                })
            },
            goBack(){
                history.back();//返回上一页面
            }
        },
        created:function () {
            //通过id请求需要修改的信息
            axios.get("/customer/selectById/update"+location.search).then(function (response) {
                v.customer = response.data;
            })

        }
    })
</script>
</html>